'use client';

import React from 'react';
import { Button } from '@/components/ui/button';
import { AlertCircle } from 'lucide-react';

export interface ErrorFallbackProps {
  error: Error;
  resetErrorBoundary?: () => void;
  title?: string;
  showReset?: boolean;
  className?: string;
}

/**
 * 错误回退组件
 * 
 * 显示错误信息和重置按钮
 * 
 * @example
 * ```tsx
 * <ErrorFallback 
 *   error={error} 
 *   resetErrorBoundary={() => setError(null)} 
 * />
 * ```
 */
export function ErrorFallback({
  error,
  resetErrorBoundary,
  title = '出现错误',
  showReset = true,
  className = '',
}: ErrorFallbackProps) {
  return (
    <div className={`p-4 rounded-md bg-destructive/10 border border-destructive/20 ${className}`}>
      <div className="flex items-start gap-3">
        <AlertCircle className="h-5 w-5 text-destructive shrink-0 mt-0.5" />
        <div className="flex-1">
          <h3 className="text-sm font-medium text-destructive mb-1">
            {title}
          </h3>
          <p className="text-sm text-muted-foreground mb-3">
            {error.message || '发生未知错误'}
          </p>
          {showReset && resetErrorBoundary && (
            <Button
              variant="outline"
              size="sm"
              onClick={resetErrorBoundary}
              className="mt-1"
            >
              重试
            </Button>
          )}
          <details className="mt-3 text-xs text-muted-foreground">
            <summary className="cursor-pointer">查看详情</summary>
            <pre className="mt-2 whitespace-pre-wrap break-words overflow-auto max-h-[200px] p-2 bg-muted rounded-sm">
              {error.stack || error.toString()}
            </pre>
          </details>
        </div>
      </div>
    </div>
  );
} 